<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" class="cvs">
        不支持canvas标签，请升级浏览器
    </canvas>
    <script>
        var cvs = document.querySelector('.cvs');
        var ctx = cvs.getContext('2d');

        var arr = [
            {color: 'lightblue', deg: 40}, 
            {color: 'lightgreen', deg: 50}, 
            {color: 'orange', deg: 110}, 
            {color: 'blue', deg: 90}, 
            {color: 'red', deg: 70}, 
        ]

        var startDeg = 0;
        for (var i = 0; i < arr.length; i++) {
            ctx.beginPath();
            ctx.moveTo(300, 200);
            ctx.arc(300, 200, 200, Math.PI/180*startDeg, Math.PI/180*(startDeg += arr[i].deg), false);
            ctx.fillStyle = `${arr[i].color}`;
            ctx.fill();
            ctx.closePath();
        }
    </script>
</body>
</html>